<template>
    <div class="content">
        <el-card class="box-card">
            <el-row>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="用户名">
                        <el-input v-model="username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                        <el-button type="primary" icon="el-icon-circle-plus" @click="addtClick()">新增</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel()">批量删除</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-table ref="multipleTable" :data="pageData.list" border fit style="width: 100%" :header-row-style="() => { return 'line-height:20px';}" highlight-current-row
                :header-cell-style="{ background: 'rgb(55, 60, 100)',color: '#FFFFFF',textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="password" label="密码"></el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="text" style="color: red;" icon="el-icon-delete" @click="handleDel(scope.row.username)" size="small">删除</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="editClick(scope.row.username)" size="small">更新密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
            </el-pagination>
            <el-dialog title="变更密码" :visible.sync="editForm.dialogVisible" width="30%">
                <el-form ref="editForm" :model="editForm" label-width="auto">
                    <el-form-item label="用户名">
                        <el-input v-model="editForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="旧密码">
                        <el-input v-model="editForm.oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input v-model="editForm.newPassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-circle-plus" @click="handleUpdatePassword">提交</el-button>
                        <el-button icon="el-icon-error" @click="editForm.dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="注册用户" :visible.sync="addForm.dialogVisible" width="30%">
                <el-form ref="addForm" :model="addForm" label-width="auto">
                    <el-form-item label="用户名">
                        <el-input v-model="addForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="addForm.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-circle-plus" @click="handleRegister">提交</el-button>
                        <el-button icon="el-icon-error" @click="addForm.dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
    import { userPage, userDel, userAdd, userUpdatePwd } from '../../api/user'
    export default {
        mounted() {
            this.getPageList()
        },
        data() {
            return {
                username: '',
                editForm: {
                    dialogVisible: false,
                    username: '',
                    oldPassword: '',
                    newPassword: ''
                },
                addForm: {
                    dialogVisible: false,
                    username: '',
                    password: ''
                }
            }
        },
        methods: {
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.username);
            },
            handleBatchDel() {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '请选择需要删除的数据'
                    })
                } else {
                    this.$confirm('确认要删除吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        userDel(this.multipleSelection).then((res) => {
                            this.$message({ message: '删除成功！', type: 'success' })
                            this.getPageList()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    })
                }
            },
            handleClear() {
                this.username = ''
                this.getPageList()
            },
            getPageList() {
                userPage(this.username, this.page.page, this.page.limit).then((res) => {
                    this.pageData = res.data
                })
            },
            handleUpdatePassword() {
                userUpdatePwd(this.editForm.username, this.editForm.oldPassword, this.editForm.newPassword).then((res) => {
                    this.$message({ message: '更新密码成功！', type: 'success' })
                })
                this.editForm.dialogVisible = false
                this.getPageList()
            },
            editClick(username) {
                this.editForm.dialogVisible = true
                this.editForm.username = username
                this.editForm.oldPassword = ''
                this.editForm.newPassword = ''
            },
            addtClick() {
                this.addForm.dialogVisible = true
                this.addForm.username = ''
                this.addForm.password = ''
            },
            handleRegister() {
                userAdd(this.addForm.username, this.addForm.password).then(res => {
                    this.$message({ message: '注册成功！', type: 'success' })
                    this.addForm.dialogVisible = false
                    this.getPageList()
                })
            }
        }
    }
</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
}
</style>
